<template>
  <div>
    <Modal
      :title="'编辑角色：'+role.name"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
      width="860"
    >
      <Steps :current="current">
        <Step title="分配模块"></Step>
        <Step title="分配角色"></Step>
      </Steps>
      <div style="margin-top:20px">
        <div v-show="current==0">
          <Tree
            ref="treeV"
            :data="permissionTree"
            multiple
            show-checkbox
            :check-strictly="true"
            @on-check-change="checkChange"
          ></Tree>
        </div>
        <div v-show="current==1" style="margin-top:10px;overflow-x: auto;max-height: 500px;">
          <template v-for="item in uiMenuEle">
            <div :key="item.uiMenuId" v-if="IsExist(uiMenuIds,item.uiMenuId)">
              <Breadcrumb separator=">">
                <BreadcrumbItem v-for="it in item.uiMenuArr" :key="it+item.uiMenuId">{{it}}</BreadcrumbItem>
              </Breadcrumb>
              <br />
              <CheckboxGroup v-model="role.grantedPermissions">
                <Checkbox
                  class="check-role"
                  v-for="Ele in item.menuElements"
                  :label="Ele.permissionKey"
                  :key="Ele.name+item.uiMenuId"
                >
                  <span>{{L(Ele.displayName)}}</span>
                </Checkbox>
              </CheckboxGroup>
              <br />
            </div>
          </template>
        </div>
      </div>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button type="primary" @click="next">{{ message }}</Button>
        <Button @click="save" type="primary" v-show="isShow">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import Role from "@/store/entities/role";
@Component
export default class AssignUiMenuRole extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  @Prop({ default: [] }) permissionTree: any;
  @Prop({ default: [] }) uiMenuEle: any;
  @Prop({ default: [] }) checkDataRef: any;
  role: Role = new Role();
  current = 0;
  permissionTreeLoad = [];
  checkData = []; //选中的tree 节点
  message = "下一步"; //步骤按钮初始值
  uiMenuIds = [];
  get permissions() {
    return this.$store.state.role.permissions;
  }

  //确定
  async save() {
    //   (this.$refs.treeV as any).getCheckedNodes().forEach(element => {
    //       console.log(element.permissionKey)
    //       console.log("element")
    //       this.role.grantedPermissions.push(element.permissionKey)
    //   });
    //console.log(this.role.grantedPermissions);
    await this.$store.dispatch({
      type: "role/update",
      data: this.role
    });
    //(this.$refs.roleForm as any).resetFields();
    this.$emit("save-success");
    this.$emit("input", false);
    this.$Notice.success({
      title: "成功",
      desc: "更新成功."
    });
  }

  //取消
  cancel() {
    //(this.$refs.roleForm as any).resetFields();
    this.$emit("input", false);
  }

  //状态发生变化
  visibleChange(value: boolean) {
    if (!value) {
      this.$emit("input", value);
      //点击取消时将按钮状态初始化
      this.message = "下一步";
      this.isShow = false;
    } else {
      this.current = 0;
      this.role = Util.extend(true, {}, this.$store.state.role.editRole);
      console.log(this.permissionTree);
      this.permissionTreeLoad = this.permissionTree;
      this.checkData = (this.$refs.treeV as any).getCheckedNodes();
      console.log(this.checkData);
    }
  }

  isShow = false; //确认按钮显示隐藏 默认隐藏
  //下一步
  next(val) {
    if (this.current == 1) {
      this.current = -1;
      this.message = "下一步";
      this.isShow = false;
    } else {
      this.uiMenuIds = [];
      if (this.checkData.length == 0) {
        this.$Notice.warning({
          title: "提醒",
          desc: "请先选择模块."
        });
        return false;
      } else {
        this.checkData.forEach(element => {
          this.uiMenuIds.push(element.value);
        });
        console.log(this.uiMenuIds);
        this.message = "上一步";
        this.isShow = true;
      }
    }
    this.current = this.current + 1;
  }
  checkChange(obj) {
    //tree 勾选事件
    var objArr = [];
    var checkDataArr = [];
    obj.forEach(element => {
      objArr.push(element.permissionKey);
    });
    this.checkData.forEach(element => {
      checkDataArr.push(element.permissionKey);
    });

    if (objArr.length > checkDataArr.length) {
      //添加
      objArr.forEach(ele => {
        if (checkDataArr.indexOf(ele) == -1) {
          this.role.grantedPermissions.push(ele);
        }
      });
    } else {
      //移除
      checkDataArr.forEach(ele => {
        if (objArr.indexOf(ele) == -1) {
          this.role.grantedPermissions.splice(
            this.role.grantedPermissions.indexOf(ele),
            1
          );
          //console.log("移除" + ele);
        }
      });
    }
    this.checkData = obj;
    //console.log(obj)
  }
  IsExist(objs, item) {
    if (objs.indexOf(item) == -1) {
      return false;
    } else {
      return true;
    }
  }
  created() {}
}
</script>

